// 作用：用于包裹俩个登录表单，并且登录页面的样式效果由该组件决定

import React, { Component } from "react";
import { Card, Tabs } from "antd";
import styled from "styled-components";
import bg from "../../assets/bg.jpg";
import Passwdlogin from "./PasswdLogin";
import Mobilelogin from "./MobileLogin";
class Index extends Component {
    render() {
        const { TabPane } = Tabs;
        return (
            <Containder>
                <LoginForm>
                    <Card style={{ borderRadius: "19px" }}>
                        <Tabs defaultActiveKey="1" centered>
                            <TabPane tab="密码登录" key="1">
                                <Passwdlogin/>
                            </TabPane>
                            <TabPane tab="短信登录" key="2">
                                <Mobilelogin/>
                            </TabPane>
                        </Tabs>
                    </Card>
                </LoginForm>
            </Containder>
        );
    }
}

// 整体的大容器
const Containder = styled.div`
    width: 100%;
    height: 100%;
    background: url(${bg});
    padding-top: 18%;
    background-size: 100%;
    overflow: hidden;
`;

// 登录表单的盒子
const LoginForm = styled.div`
    width: 400px;
    margin: 0 auto;
`;

export default Index;
